<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-04-21 10:56:12
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2022-04-21 17:37:23
 * @FilePath: \tea-garden-web\src\components\component-farming-tasks.vue
 * @Description: 组件-农事任务
-->
<template>
  <div class="component-farming-tasks">
    <el-skeleton animated>
      <!-- <template #template>
        <el-skeleton-item
          v-for="(item, index) in 2"
          :key="index"
          variant="rect"
          style="height: 60px; background: #f2f2f2"
          :style="{ 'margin-bottom': index === 1 ? 0 : '14px' }"
        />
      </template> -->
      <template #template>
        <div class="farming-task-title">
          <img src="../../public/image/common/tongzhi.png" />
          <span>长势结果分析</span>
        </div>
        <div class="farming-task-image">
          <!-- <img src="http://121.40.144.89/pic/000000005bbdff06/2023_07_23_12_30_38_pic.jpg" /> -->
          <video ref="videoPlayer"
            :src="videoUrl"
            id="videoPlayer"
            controls
            muted
          >
          </video>
          <!-- <div class="farming-task-time">更新时间：{{ nowDate }}</div> -->
        </div>
        <div class="farming-task-content" v-if="soilList">
          <div class="farming-task-label">
            <div class="farming-task-label-title">土壤监测<span>更新时间：{{ nowDate }}</span></div>
            <span class="farming-task-label-time" @click="$router.push({ name: 'portalHistory', query: { history: 1 } })">查看历史数据 <img src="../../public/image/common/toRight.png" /></span>
          </div>
          <div class="farming-task-tag">
            <div>温度:{{ soilList.wenDu }}</div>
            <div>湿度:{{ soilList.shiDu }}</div>
            <div class="noRight">电导率:{{ soilList.dianDaoLv }}</div>
            <div>氮:{{ soilList.dan }}</div>
            <div>磷:{{ soilList.lin }}</div>
            <div class="noRight">钾:{{ soilList.jia }}</div>
          </div>
        </div>
        <div class="farming-task-content" v-if="weatherList.length">
          <div class="farming-task-label">
            <div class="farming-task-label-title">气象监测<span>更新时间：{{ weatherList[0].createTime }}</span></div>
            <span class="farming-task-label-time" @click="$router.push({ name: 'portalHistory', query: { history: 2 } })">查看历史数据 <img src="../../public/image/common/toRight.png" /></span>
          </div>
          <div class="farming-task-tag" v-if="weatherList.length">
            <div>温度:{{ weatherList[0].tem }}°C</div>
            <div>湿度:{{ weatherList[0].humidity }}</div>
            <div class="noRight">天气:{{ weatherList[0].wea }}</div>
            <div>风向:{{ weatherList[0].win }}</div>
            <div>风速:{{ weatherList[0].winMeter }}</div>
          </div>
        </div>
      </template>
      <template #default>
        <!-- <div class="farming-task" v-for="(item, index) in data" :key="index">
          <section style="height: 14px"></section>
          <el-row style="margin-top: 3.5px; line-height: 19px">
            <el-col :span="16" class="farming-type">{{
              getDictItemNameById(item.farmingType)
            }}</el-col>
            <el-col
              :span="8"
              class="farming-status"
              :class="[`farming-status-${item.state}`]"
              >{{ getDictItemNameById(item.state) }}</el-col
            >
          </el-row>
          <el-row style="margin-top: 3px; line-height: 14px">
            <el-col :span="24" class="farmland text-overflow">{{
              item.massifNum
            }}</el-col>
          </el-row>
        </div> -->
      </template>
      <!-- <template #default v-else>
        <no-data style="margin: 25px auto 0 auto" :width="70" :height="77" />
      </template> -->
    </el-skeleton>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
// import noData from './no-data.vue'
import { get } from '@/util/http.js'
import moment from 'moment'
import hlsjs from 'hls.js'
export default {
  // components: { noData },
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    height: {
      type: Number,
      default: 173
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      weatherList: [],
      soilList: null,
      nowDate: moment().format('MM/DD HH:mm:ss'),
      videoUrl: null,
      hlsjs: null
    }
  },
  created () {
    this.getData()
    this.videoGet()
    this.timeChange()
  },
  beforeUnmount () {
    if (this.hlsjs) {
      this.$refs.videoPlayer.pause()
      this.$refs.videoPlayer = null
      this.hlsjs.destroy()
      this.hlsjs = null
    }
  },
  computed: {
    // ...mapGetters('common', ['getDictItemNameById'])
  },
  methods: {
    // 时间定时
    timeChange () {
      this.nowDate = moment().format('MM/DD HH:mm:ss')
      setTimeout(() => {
        this.timeChange()
      }, 1000)
    },
    async videoGet () {
      // const myPlayer = this.$refs.videoPlayer.player
      if (this.videoUrl) {
        return
      }
      get({ url: '/device/getMonitorURL', params: { channelNo: 4, deviceSerial: 'K60273702' } }).then(async res => {
        this.videoUrl = res.url
        const video = await this.$refs.videoPlayer
        if (hlsjs.isSupported()) {
          this.hlsjs = await new hlsjs()
          this.hlsjs.loadSource(this.videoUrl)
          this.hlsjs.attachMedia(video)
          this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
            video.play()
          })
          this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
            console.log('加载失败')
          })
        }
      })
    },
    async getData () {
      // 气象
      get({ url: '/weather/list' }).then(res => {
        this.weatherList = res
        this.weatherList[0].createTime = moment(this.weatherList[0].createTime).format('MM/DD HH:mm:ss')
      })
      // 土壤监测
      get({ url: '/device/getSoil' }).then(res => {
        this.soilList = res
      })
    }
  }
}
</script>

<style lang="scss">
.component-farming-tasks {
  // width: 273px;
  background: #ffffff;
  // box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
  .farming-task {
    height: 63px;
    position: relative;
    padding-left: 14px;
    // margin-bottom: 20px;
    &:last-of-type {
      margin-bottom: 0;
    }
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 5px;
      height: 63px;
      background: linear-gradient(180deg, #ffc0b8 0%, #fd988b 100%);
      border-radius: 2px;
    }
    .date-time {
      font-size: 12px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #888c96;
    }
    .farming-type {
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #089bab;
    }
    .farming-status {
      font-size: 12px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      display: inline-block;
      vertical-align: middle;
      text-align: right;
      &::before {
        content: "";
        display: inline-block;
        height: 8px;
        width: 8px;
        border-radius: 8px;
        margin-right: 4px;
      }
    }
    .farmland {
      font-size: 12px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #888c96;
    }
  }
}
.farming-task-title {
  background: #089BAB;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  img {
    width: 15px;
    margin-right: 5px;
  }
}
.farming-task-image {
  position: relative;
  font-weight: 300;
  font-size: 0;
  img {
    margin-top: 10px;
    border-radius: 8px;
    max-height: 160px;
    width: 100%;
  }
  #videoPlayer {
    object-fit: fill;
    width: 100%;
    margin-top: 10px;
    border-radius: 8px;
    height: 160px;
  }
  .farming-task-time {
    position: absolute;
    bottom: 11px;
    font-size: 12px;
    background: #00000060;
    padding: 5px 15px 5px 6px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    color: #fff
  }
}
.farming-task-content {
  margin-top: 15px;
  .farming-task-label {
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
  }
  .farming-task-label-title {
    font-weight: bold;
    margin-bottom: 5px;
    span {
      color: #999;
      font-weight: 400;
      margin-left: 7px;
      -webkit-text-size-adjust: none; /* 关闭WebKit对文本大小的自动调整 */
      font-size: 10px; /* 尝试设置小于12px的字体大小 */
    }
  }
  .farming-task-label-time {
    color: #089BAB;
    display: flex;
    align-items: center;
    -webkit-text-size-adjust: none; /* 关闭WebKit对文本大小的自动调整 */
    font-size: 10px; /* 尝试设置小于12px的字体大小 */
    img {
      width: 15px
    }
  }
  .farming-task-tag {
    color: #089BAB;
    font-size: 12px;
    display: flex;
    align-items: center;
    font-weight: 500;
    flex-wrap: wrap;
    > div {
      box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.08);
      border-radius: 3px;
      padding: 3px 6px 4px 6px;
      margin-top: 8px;
      margin-right: 6px;
    }
   .noRight {
      margin-right: 0 !important;
   }
  }
}
</style>
